#tab{
  position: fixed;
  z-index: 10;
  bottom: 0;
  left:0;
  width: 375px;
  height: 50px;
  border-top:1px solid rgba(255,255,255,.7);
  ul{
    width: 375px;
    height:50px;
    display: flex;
    display: -webkit-box;
    li{
      position: relative;
      flex-grow:1;
      -webkit-box-flex:1;
      text-align: center;
      line-height: 50px;
      color:#999999;
      text-shadow:#fff 0 0 1px,#fff 0 0 1px;
      &.active{
        color:#fff;
      }
      &.active:after{
        position: absolute;
        bottom: 0;
        left:0;
        content:"";
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
      }
      .item-icon{
        position: relative;
        top:3px;
        font-size: 24px;
      }
      .icon{
        color: #fff;
        font-size: 40px;
        &.cubeic-add{
          display: inline-block;
          transition: transform .3s;
          &.hide{
            transform:rotate(0);
          }
          &.show{
            transform: rotate(45deg);
          }
        }
      }
    }
  }
}
#type{
  position: fixed;
  z-index:11;
  bottom:50px;
  left:50%;
  width: auto;
  height: 70px;
  font-size:12px;
  display:flex;
  display:-webkit-box;
  justify-content:center;
  -webkit-box-pack: center;
  transition: transform .3s;
  &.hide{
    transform:translateX(-50%) translateY(110px) scale(.9);
  }
  &.show{
    transform:translateX(-50%) translateY(0) scale(.9);
  }
  &.hide .item{
    transform:translateY(110px) scale(.9);
  }
  &.show .item{
    transform:translateY(0) scale(.9);
  }
  .item{
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
    margin-right: 10px;
    text-align: center;
    background: rgba(0,0,0,.6);
    border-radius: 10px;
    padding:5px;
    box-sizing: border-box;
    color:#fff;
    .a{
      color:#fff;
    }
    &:nth-of-type(1){
      transition: transform .3s;
    }
    &:nth-of-type(2){
      transition: transform .3s .1s;
    }
    &:nth-of-type(3){
      transition: transform .3s .2s;
      margin-right: 0;
    }
  }
  .icon{
    width: 40px;
    height:40px;
    margin-bottom: 3px;
  }
}

.not-home{
  background: #fff !important;
  li{
    &.active{
      color:#ff9d2a !important;
    }
    &.active:after{
      background: #FF9D2A !important;
    }
  }
  .icon{
    color:#FF9D2A !important;
  }
  #type{
    .item{
      background: #fff !important;
      color:#2F2F2F;
      border: 1px solid #f9f9f9;
      box-sizing: border-box;
      .a{
        color: #2f2f2f;
      }
    }
  }
}